<template>
	<el-dialog title="提示" :visible.sync="show" width="36%">
		<!-- 表单验证组件 -->
		<el-form
			ref="ruleForm"
			label-width="100px"
			class="demo-ruleForm"
			:model="ruleForm"
			:rules="rules"
		>
			<el-form-item label="当前用户： " prop="username">
				{{ ruleForm.username }}
			</el-form-item>
			<el-form-item label="当前角色： " prop="email">
				{{ ruleForm.role }}
			</el-form-item>
			<el-form-item label="分配角色： " prop="email">
				<el-select v-model="Selectlistes" placeholder="请选择">
					<el-option
						v-for="item in listes"
						:key="item.id"
						:label="item.roleName"
						:value="item.id"
					>
					</el-option>
				</el-select>
			</el-form-item>
		</el-form>
		<span slot="footer" class="dialog-footer">
			<el-button @click="dialogVisible">取 消</el-button>
			<el-button type="primary" @click="dialogVisibled">确 定</el-button>
		</span>
	</el-dialog>
</template>
<script>
export default {
	name: 'Revise',
	data() {
		return {
			show: false,
			list: '',
            listes:'',
            id:'',
            Selectlistes:'',
			ruleForm: {
				username: '',
				role: '',
			},
            value:{

            },
			rules: {
				role: [{ required: true, message: '不能为空！', trigger: 'blur' }],
			},
		}
	},

	methods: {
		dialogVisible() {
			this.show = false
		},
		dialogVisibled() {
			this.$refs.ruleForm.validate(boolean => {
				if (boolean) {
                    this.$http.put(`/users/${this.id}/role`,{
                        id:this.id,
                        rid:this.Selectlistes
                    }).then(response => {
                    let {meta} = response.data
					if(meta.status == 200){
					this.$message({
						message:meta.msg,
						type: 'success'
					})
					}
					else{
						this.$message.error('设置角色失败！')
					}
                        
                    }).catch(error => {
                        console.log(error.message)
                        
                    })
				} else {
					this.$message.error('修改失败！')
				}
			})

			this.show = false
		},
	},
	components: {},
	mounted() {
		this.$bus.$on('addRoleDialog', data => {
			this.show = true
			this.list = data
			this.ruleForm.username = data.username
			this.ruleForm.role = data.role_name
            this.id = data.id       
		})
	},
	created() {
		this.$http.get('/roles').then(response => {
            let {meta,data} = response.data
            if(meta.status != 200){
                this.$message.error('获取角色列表失败！')
            }
            this.listes =  data
            
		})
	},
}
</script>

<style scoped>
.demo-ruleForm {
	text-align: left;
}
</style>
